<template>
    <div class="frame-page-box">
        <div class="top-bar-box">
            <!-- 标题和项目名称 -->
            <div class="top-bar-title">
                <img class="plan-icon" src="~assets/image/title/plane.png" alt="plan-icon">
                <img class="title-name" src="~assets/image/title/title-name.png" alt="航空气象服务平台">
            </div>
            <!-- 导航栏 -->
            <ul class="nav-box">
                <router-link tag="li" :to="{ name: 'MonitorModule' }" class="nav-item" active-class="nav-item-active">
                    <img src="~assets/image/title/monitor-module-active.png" alt="监控模块"
                        v-if="isRouteActive('MonitorModule')">
                    <img src="~assets/image/title/monitor-module.png" alt="监控模块" v-else>
                    <span>监控模块</span>
                </router-link>
                <router-link tag="li" :to="{ name: 'ForecastModule' }" class="nav-item" active-class="nav-item-active">
                    <img src="~assets/image/title/forecast-module-active.png" alt="监控模块"
                        v-if="isRouteActive('ForecastModule')">
                    <img src="~assets/image/title/forecast-module.png" alt="监控模块" v-else>
                    <span>预报模块</span>
                </router-link>
            </ul>
            <!-- 时间和退出按钮 -->
            <div class="right-box">
                <div class="time-box">
                    {{ timeText }}
                </div>
                <div class="logout-button">
                    <img src="~assets/image/title/power.png" alt="logout-button" class="logout-button-icon">
                    退出
                </div>
            </div>
        </div>
        <!-- 内容部分 -->
        <div class="frame-content-box">
            <router-view />
        </div>
    </div>
</template>
  
<script>
import dayjs from 'dayjs'
export default {
    name: "FramePage",
    data() {
        return {
            timeText: ''
        }
    },
    created() {
        this.setTimeText()
    },
    methods: {
        //判断是否选中的当前模块
        isRouteActive(moduleName) {
            return this.$route.matched.find(item => item.name == moduleName)
        },
        //循环设置时间字符
        setTimeText() {
            // 将事件挂载到mounted勾子函数上
            this.$once('hook:mounted', () => {
                const setTime = () => {
                    const now = dayjs().subtract(8,'hour')
                    this.timeText = `UTC\xa0\xa0${now.format('YYYY-MM-DD')}\xa0\xa0星期四\xa0\xa0${now.format('HH:mm')}`
                }
                setTime()
                const interval = setInterval(setTime, 1000)
                // 设置组件移除前，清理定时任务
                this.$once('hook:beforeDestroy', () => { clearInterval(interval) })
            })
        }
    }
};
</script>
  
<style scoped lang="scss">
//顶栏样式（包含导航栏和右侧时间退出按钮）
.top-bar-box {
    display: flex;
    align-items: center;
    background-color: RGB(26, 45, 82);
    color: #FFF;
    padding-right: 20px;
    box-sizing: border-box;


    .top-bar-title {
        width: 33%;
        display: flex;
        align-items: center;

        .plan-icon {
            width: 50px;
            margin-bottom: 5px;
        }

        .title-name {
            width: 300px;
        }
    }

    .nav-box {
        display: flex;
        justify-content: center;
        width: 33%;


        .nav-item {
            padding: 5px;
            cursor: pointer;
            color: RGBA(255, 255, 255, .5);
            display: flex;
            align-items: center;

            span {
                margin-left: 15px;
            }

            img {
                width: 31px;
            }

            &+.nav-item {
                margin-left: 55px;
            }
        }

        .nav-item-active {
            color: #FFF;
        }
    }

    .right-box {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 1;

        .time-box {
            margin-right: 40px;
        }

        .logout-button {
            display: flex;
            align-items: center;
            cursor: pointer;

            .logout-button-icon {
                width: 20px;
                height: 20px;
                margin-right: 10px;
            }
        }
    }
}

//页面框架的样式
.frame-page-box {
    width: 100%;
    height: 100%;

    .top-bar-box {
        background-color: RGBA(7, 29, 68, 2);
        height: 70px;
    }

    .frame-content-box {
        width: 100%;
        height: calc(100% - 70px);
    }
}
</style>